<template>
	<view class="content">
		<uniNavBar
			title='我的收藏' 
			leftIcon="left"
			:right-text='  isNavBar?"完成":"编辑"   ' 
			fixed='true'
			status-bar='true'
			@clickRight='  isNavBar = !isNavBar  '
			@clickLeft="Back"
		></uniNavBar>
		<!-- 商品列表模块 -->
		<!-- 内容快部分 -->
		<template v-if="list.length>=1">
			<view class="shop-list">
				<view class="shop-item" v-for="(item,index) in list" :key="index" @tap='goods_collect_selectedItem(index)'>
					<label class="radio">
						<radio value="" color="#FF3333" :checked="item.checked" v-if="isNavBar"/>
						<view class="shop-img-text">
							<image class="shop-img" :src="item.imgUrl" mode=""></image>
							<view class="shop-text">
								<text class="shop-name">{{item.name}}</text>
								<view class="shop-price">
									<text class="money">￥{{item.pprice}}</text>
								</view>
							</view>
						</view>
					</label>
				</view>
			</view>
			<!-- 底部 -->
			<view class="shop-foot" v-if="isNavBar">
				<!-- 全选按钮 -->
				<label class="foot-radio" @tap="goods_collect_checkedAllFn">
					<radio value="" color='#FF3333' :checked="goods_collect_checkedAll"/><text>全选</text>
				</label>
				<!-- 删除订单 -->
				<view class="delOrder" @tap="goods_collect_delGoodsFn">删除</view>
			</view>
		</template>
		<template v-else>
			<view style="height: 500rpx;display: flex; justify-content: center; align-items: center; flex-direction: column;" >
				<text>还没有收藏商品哦</text>
				<view class="btn" @tap="goIndex">去首页逛逛</view>
			</view>
		</template>
	</view>
</template>

<script>
	import Lines from '../../components/common/Lines.vue'
	import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
	import $http from "../../common/api/request.js"
	import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				isNavBar:false,
				goodslist:[],
				checked:false,
			}
		},
		components:{
			uniNavBar,
			Lines
		},
		computed:{
			...mapState({
				list:state=>state.goods_collect.list,
				selectedList:state=>state.goods_collect.selectedList
			}),
			...mapGetters(['goods_collect_checkedAll'])
		},
		onLoad(e) {
			this.getData()
		},
		methods: {
			...mapMutations(['initGetGoodsCollectData','goods_collect_selectedItem']),
			...mapActions(['goods_collect_checkedAllFn','goods_collect_delGoodsFn']),
			Back(){
				uni.navigateBack({
					delta:1
				})
			},
			getData(){
				$http.request({
					url:'/getCollectGoods',
					method:'POST',
					header:{
						token:true
					},
				}).then((res)=>{
					this.initGetGoodsCollectData(res)
				}).catch(()=>{
					uni.showToast({
						title:"请求失败了哦",
						icon:"error"
					})
				})
			},
			goIndex(){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			}
			// goDetial(item,index){
			// 	let info = {
			// 		id:item.shopId,
			// 		shopType:item.type
			// 	}
			// 	if(!this.isNavBar){
			// 		uni.navigateTo({
			// 			url:"/pages/detial/detial?info="+JSON.stringify(info)+""
			// 		})
			// 	}
			// }
		}
	}
</script>

<style scoped>
.shop-list{
	padding-top: 20rpx;
	padding-bottom: 80rpx;
}
.shop-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #e1e1e1;
}
.radio {
	padding: 15rpx;
	height: 150rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.shop-img{
	width: 150rpx;
	height: 150rpx;
}
.shop-text{
	flex: 1;
	height: 150rpx;
	padding: 15rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.shop-price {
	display: flex;
	justify-content:space-between;
	align-items: center;
}
.deleRecord{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100rpx;
	height: 36rpx;
	font-size: 18rpx;
	border: 2rpx solid #42B7FB;
	color: #42B7FB;
	border-radius: 50rpx;
}
.shop-foot{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #f4f5f6;
}
.delOrder {
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	width: 20%;
	height: 80rpx;
	background-color: red;
}
.shop-img-text{
	display: flex;
	justify-content: center;
	margin-left: 30rpx;
}
.btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 220rpx;
	height: 60rpx;
	color: #42B7FB;
	border: 2rpx solid #42B7FB;
	border-radius: 50rpx;
	margin-top: 20rpx;
}
</style>
